<template>
	<view class="article-container">
		<view class="article-wrapper">
			<view class="article-title">
				{{article.title}}
			</view>
			<view class="article-header" v-if="article.author">
				<image class="avatar" :src="article.author.avatar" mode="aspectFill"></image>
				<view class="author-info">
					<text>{{article.author.author_name}}</text>
					<view class="article-info">
						<text>{{article.create_time | format_time}}</text>
						<text>{{article.browse_count}} 浏览</text>
						<text>{{article.thumbs_up_count}} 赞</text>
					</view>
				</view>
				<button class="follow-btn" @click="_follow">{{is_followed?'取消关注':'关注'}}</button>
			</view>
			<u-parse class="article-content" :content="article_content"></u-parse>
		</view>
		<view class="article-comment">
			<view class="comment-header">
				最新评论
			</view>
			<view class="comment-list" v-if="comment_list.length">
				<CommentItem v-for="item in comment_list" :key="item.id" :comment="item"
					@reply="reply_comment" />
			</view>
			<view class="no-data" v-else>
				暂时没有评论
			</view>
		</view>
		<view class="article-footer">
			<view class="article-inp" @click="open_popup">
				<text>谈谈你的看法</text>
				<uni-icons type="compose" color="#f25037" size="20" />
			</view>
			<uni-icons type="chat" color="#f25037" size="27" @click="to_comment" />
			<CollectBtn :article_id="article._id" size="26" />
			<uni-icons :type="is_liked? 'hand-up-filled' : 'hand-up'" color="#f25037" size="27"
				@click="_like" />
		</view>
		<SpeakComment :show_popup="show_popup" :article_id="article._id" :reply_data="reply_data"
			@close="show_popup=false" @send_over="send_over" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		marked
	} from 'marked/src/marked.js'
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		filters: {
			format_time(time) {
				const date = time.split(' ')[0].split('.')
				return `${date[0]}年${+date[1]}月${+date[2]}日`
			}
		},
		components: {
			uParse
		},
		data() {
			return {
				article: {},
				show_popup: false,
				comment_list: [],
				reply_data: {}
			}
		},
		async onLoad(arg) {
			const {
				article
			} = await this.$http.get_article({
				id: arg.id
			})
			this.article = article
			this._get_comment_list()
		},
		computed: {
			is_followed() { // 是否关注当前文章
				return this.user_info?.author_likes_ids.includes(this.article.author.id)
			},
			is_liked() { // 是否点赞当前文章
				return this.user_info?.thumbs_up_article_ids.includes(this.article._id)
			},
			article_content() {
				try {
					return marked(this.article.content)
				} catch (e) {
					return ''
				}
			},
		},
		methods: {
			async _get_comment_list() {
				this.comment_list = await this.$http.get_comment_list({
					article_id: this.article._id
				})
			},
			open_popup() {
				if (!this.check_login()) return;
				this.show_popup = true
			},
			async _follow() {
				if (!this.check_login()) return;
				const {
					user_info,
					msg
				} = await this.$http.follow_author({
					user_id: this.user_info._id,
					author_id: this.article.author.id
				})
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				this.$store.commit('set_user_info', user_info)
			},
			async _like() {
				if (!this.check_login()) return;
				const {
					user_info,
					msg
				} = await this.$http.like_article({
					user_id: this.user_info._id,
					article_id: this.article._id
				})
				// 更新点赞数量
				if (msg === '点赞成功') {
					this.article.thumbs_up_count++
				} else {
					this.article.thumbs_up_count--
				}
				
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				this.$store.commit('set_user_info', user_info)
			},
			to_comment() {
				uni.navigateTo({
					url: '/pages/comment/comment?article_id=' + this.article._id
				})
			},
			reply_comment(data) {
				if (!this.check_login()) return;
				this.reply_data = data.comment
				this.reply_data.is_reply = data.is_reply
				this.show_popup = true
			},
			send_over() {
				// 发送完评论，清空回复数据，更新评论列表
				this.reply_data = {}
				this._get_comment_list()
			}
		}
	}
</script>

<style lang="scss">
	@import './article.scss';
</style>
